<template>
	<view class="container">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">忘记密码</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--忘记密码start-->
		<view class="improve">
			<view class="improve_tab improve_tab01">
				<text class="active">检索账号</text>
				<text>验证码</text>
				<text>重置密码</text>
			</view>
			
			<view class="tel_form">
				<view class="tel">
					<view class="type">
						<image :src="c_img"></image>
						<view @tap="open_choose">{{c_name}}</view>
					</view>
					<view class="inputs">
						<label>{{c_tel}}</label>
						<u-input type="number" placeholder="输入手机号" value="" placeholderStyle="color: #C9CACA" v-model="cusname" @focus="keyboard_show = true"></u-input>
						<image src="/static/images/img_07.png" class="tel_close" v-if="cusname.length>0" @click="cusname=''"></image>
					</view>
				</view>
			</view>
			
		</view>
		<!--忘记密码end--> 
		
		<!--底部start-->
		<view class="f_btn">
			<button class="submit on" @tap="yan_open">确定</button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<!--弹窗start-->
		<u-modal :show="yan_show" :confirmText="confirmText" confirmColor="#757475" @confirm="confirm">
			<view class="box_content">
				<image src="/static/images/img_10.png" mode="widthFix" class="b_img"></image>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</u-modal>
		
		<u-popup :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
			<view class="choose">
				<view class="tit">国际区号<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
				<view class="list">
					<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
						<image :src="item.url"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!--弹窗end-->
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				yan_show: false,
				content:'此ID不存在，请重新输入',
				confirmText:"关闭",
				tel_show: false,
				items: [
					{
						url:'/static/images/img_03.png',
						name:"CN",
						tel:"+86"
					},
					{
						url:'/static/images/img_04.png',
						name:"US",
						tel:"+1"
					},
					{
						url:'/static/images/img_05.png',
						name:"IN",
						tel:"+91"
					}
				],
				count: "",
				c_img:"/static/images/img_03.png",
				c_name:"CN",
				cusname:"13800988899",
				keyboard_show: false,
				tooltip:false,
				c_tel:"+86"
			}
		},
		methods:{
			yan_open(){
				this.yan_show = true
			},
			confirm(){
				this.yan_show = false
			},
			open_choose(){
				this.tel_show = true
			},
			choose_popup_close(){
				this.tel_show = false
			},
			change(e,item) {
			    this.count = e,
				this.tel_show = false,
				this.c_name = item.name,
				this.c_img = item.url,
				this.c_tel = item.tel
			},
			valChange(val) {
				this.cusname += val;
			},
			backspace(){
				if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
			},
			key_close(){
				this.keyboard_show =false
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("member.scss");
		
</style>